<template>
  <div class="materialHeader">
    <el-menu class="el-menu-demo" mode="horizontal">
      <el-menu-item style="width: 450px;height: 60px;padding: 5px">
        <div class="inputImage">
          <el-input prefix-icon="el-icon-search" placeholder="搜索..." class="input-with-select" style="font-size: 10px;">
            <el-select v-model="value" slot="prepend" placeholder="模型ID" style="width: 100px;">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled">
              </el-option>
            </el-select>
            <div class="imageBtn" slot="suffix">
              <el-dropdown>
                <span class="el-dropdown-link"><i style="margin-top: 13px" class="el-icon-camera-solid"></i></span>
                <el-dropdown-menu slot="dropdown" style="height: 70px;">
                  <el-dropdown-item>
                    <el-button size="mini">本地上传</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button size="mini">粘贴识图</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-input>
        </div>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "MaterialHeader",
  data() {
    return {
      options: [{
        value: '选项1',
        label: '模型ID'
      }, {
        value: '选项2',
        label: '客户ID',
        disabled: true
      }, {
        value: '选项3',
        label: '订单ID'
      }],
      value: ''
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

/*设置选中el-menu-item时的状态*/
.el-menu-item.is-active {
  font-weight: bold;
  color: #1787FB !important;
}

/*设置鼠标悬浮el-menu-item时的状态*/
.el-menu-item:hover {
  color: #1787FB !important;
}
.el-dropdown-link:hover {
  font-weight: bold;
  color: #1787FB !important;
}
.el-dropdown-menu el-button:hover{
  font-weight: bold;
  color: #1787FB !important;
}

</style>
